<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>登录页面</title>
<meta name="description"
	content="particles.js is a lightweight JavaScript library for creating particles.">
<meta name="author" content="Vincent Garreau" />
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" media="screen" href="../../css/login.css">
<script src="../../js/vue/axios.min.js"></script>
<script src="../../js/vue/vue.js"></script>
<style type="text/css">
.backbody {
	position: absolute;
	width: 400px;
	height: 350px;
	border-radius: 5px;
	background: rgba(0, 0, 0, 0.1);
}

.zth-top-head {
	font-size: 26px;
	font-weight: bold;
	width: 230px;
	height: 100px;
	line-height: 90px;
	text-align: center;
	margin-left: 60px;
	text-shadow: 3px 2px 2px #333;
	-webkit-text-fill-color: white;;
}

.ssb {
	padding-top: 10px;
	margin-left: 30px;
}

.backbody .ssb div {
	margin: 20px;
	font-size: 20px;
}

.backbody div {
	font-family: "楷体";
}

.backbody .ssb .aa input[type="text"], [type="password"] {
	width: 180px;
	height: 20px;
	border: none;
	background: none;
	border-bottom: 1px solid;
	outline: medium;
	background-color: rgba(0, 0, 0, 0);
}

.verify {
	width: 80px;
	height: 20px;
	border: none;
	background: none;
	border-bottom: 1px solid;
	outline: medium;
	background-color: rgba(0, 0, 0, 0);
}

.random {
	width: 80px;
	height: 20px;
	border: none;
	background: none;
	border: 1px solid;
	outline: medium;
	background-color: rgba(0, 0, 0, 0);
	font-size: 22px;
	font-family: "mv boli";
	color: #1E9FFF;
	text-shadow: 0.1em 0.1em;
	background-image: url(../../images/1.jpg);
	border-radius: 5px;
}

.backbody .ssb div input[type="button"] {
	width: 85px;
	height: 35px;
	margin-left: 100px;
	background: rgb(50, 197, 197, 0.5);
	border: 0;
	outline: none;
	cursor: pointer;
	border-radius: 25px;
}

* {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

a, img {
	border: 0;
}

body {
	background: #2a2b2d;
	font: 14px/1.3 'Microsoft Yahei', '宋体';
	color: #999;
}

.text-flash {
	text-align: center;
	font-weight: 400;
}

/* 必要样式 */
.bumpy-char {
	line-height: 3.4em;
	position: relative;
}
</style>
</head>
<body>
		<!-- particles.js container -->
		<div id="particles-js"
			style="display: flex; align-items: center; justify-content: center">

			<div class="backbody" id="app">
				<div class="zth-top-head text-flash">后台管理登录页面</div>
				<div class="ssb">
					<div class="aa">
						账号： <input type="text" v-model="login_user_name"
							AUTOCOMPLETE="OFF">
					</div>
					<div class="aa">
						密码： <input type="password" v-model="login_password" />
					</div>
					<div>
						验证码：<input type="text" class="verify" v-model="verify"><span
							@click="randoms"><input type="text" class="random"
							disabled="disabled" :value="random" /></span>
					</div>
					<div>
						<input type="button" @click="submit" value="登录">
					</div>
				</div>
			</div>
		</div>
	<!-- scripts -->
	<script src="../../js/particles.js"></script>
	<script src="../../js/app.js"></script>
	<script>
		function changeImg() {
			let pic = document.getElementById('picture');
			console.log(pic.src)
			if (pic.getAttribute("src", 2) == "../../images/checked.png") {
				pic.src = "../../images/checked.png"
			} else {
				pic.src = "../../images/checked.png"
			}
		}
	</script>
	<script>
		new Vue(
				{

					el : "#app",
					data : {
						//获取跟获得账号
						login_user_name : "",
						//获取跟获得密码
						login_password : "",
						//存自己输入的验证码
						verify : "",
						//存生成的验证码
						random : ""
					},
					mounted : function() {
						this.randoms();
					},
					methods : {
						submit : function() {
							var thsi = this;
							if (thsi.verify != null && thsi.verify != "") {
								if (thsi.verify == thsi.random) {
									axios
											.post(
													"/ssb/user/loginByNameAndPassword?login_user_name="
															+ thsi.login_user_name
															+ "&login_password="
															+ thsi.login_password)
											.then(
													function(res) {
														if (res.data != null
																&& res.data != "") {
															location.href = "../after/main.html";
														} else {
															console.log("失败");
														}
													}, function(err) {
														console.log(err);

													});
								} else {
									console.log("验证码错误");
									//随机生产验证码
									this.randoms();
								}
							} else {
								console.log("请输入验证码");
							}

						},

						randoms : function() {
							var s = "";
							for (var i = 0; i < 5; i++) {
								s += Math.ceil(Math.random() * 9) + "";
							}
							console.log(s);
							this.random = s;
						}

					}
				});
	</script>

	<!-- 字体跳动 -->
	<script type="text/javascript" src="../../js/jquery.min.js"></script>
	<script type="text/javascript"
		src="../../js/else/jquery.bumpytext.packed.js"></script>
	<script type="text/javascript" src="../../js/else/easying.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$('.text-flash').bumpyText();
		});
	</script>
</body>
</html>
